<script setup>
import {FwbDropdown, FwbInput, FwbListGroup, FwbListGroupItem, FwbModal} from "flowbite-vue";
import {ref,reactive,watch} from "vue";
import SvgIcon from "@/components/SvgIcon.vue";
const isShowModal = ref(false)
const closeModal = () => {
  isShowModal.value = false
}
const showModal = () => {
  isShowModal.value = true
}
const showCurrentPwd = ref(false)
const showNewPwd = ref(false)
const showRetypePwd = ref(false)
const addValue = reactive({
  role: "Manager",
  email: "",
  newPwd: "",
  retypePwd: "",
})
const RoleOptions = ref([
  {value: 1, name: 'Admin'},
  {value: 2, name: 'Manager'},
  {value: 3, name: 'Security'},
])
const clickTextUrl = text => {
  addValue.role = text
}
// 校验
const emailError = ref(false)
const retypeError = ref(false)
const retypeError2 = ref(false)
watch(() => addValue.email, newVal => {
  if(newVal.trim().length === 0){
    emailError.value = true
    return false
  }
  emailError.value = false
})
watch(() => addValue.retypePwd, newVal => {
  if(newVal.trim().length === 0){
    retypeError.value = true
    retypeError2.value = false
    return false
  }
  if(newVal !== addValue.newPwd){
    retypeError.value = false
    retypeError2.value = true
    return false
  }
  retypeError2.value = false
})
// 创建账户
const createAccount = () => {
  if(emailError.value){
    return false
  }
}
defineExpose({
  showModal,
})
</script>

<template>
  <fwb-modal v-if="isShowModal" @close="closeModal" size="md" id="CreateModal">
    <template #header>
      <div class="text-lg flex flex-col text-sm text-[#9CA3AF] font-[500] font-Medium" >
        <div class="">
          <p class="text-md">Add Account</p>
        </div>
        <div class="absolute w-full h-[1px] bg-[var(--theme-button-bg)] top-[111px] left-0 hidden s4k:block s4k:top-[79px]"></div>
      </div>
    </template>

    <template #body>
      <div class="absolute w-full h-[1px] bg-[var(--theme-button-bg)] top-[50px] left-0 s4k:hidden s2k:top-[60px]"></div>
      <div class="mb-[100px] s2k:mb-[75px] s4k:mb-[70px]">
        <p class="text-[20px] mt-[32px] font-[600] font-Inter text-[var(--theme-font-color)]">Create an Account</p>
        <div class="flex flex-col justify-start items-start mt-[32px] relative">
          <p class="text-sm text-[var(--theme-font-color)] mb-[3px] s2k:mb-[4px] s4k:mb-[6px]">User Role</p>
          <fwb-dropdown :text="addValue.role" id="dropdown">
            <fwb-list-group id="group">
              <fwb-list-group-item hover v-for="v in RoleOptions" :key="v.value" @click="clickTextUrl(v.name)">{{v.name}}</fwb-list-group-item>
            </fwb-list-group>
          </fwb-dropdown>
        </div>
        <div class="flex flex-col justify-start items-start mt-[16px] relative">
          <p class="text-sm text-[var(--theme-font-color)]">Email</p>
          <input type="text" id="input" v-model="addValue.email" :style="{border: emailError ? 'solid #FF8A4C 1px': ''}">
          <p v-show="emailError" class="text-sm text-[#FF8A4C] mt-[3px]">Please name this User Role</p>
        </div>
        <div class="flex flex-col justify-start items-start mt-[16px] relative">
          <p class="text-sm text-[var(--theme-font-color)]">Enter new password</p>
          <input :type="showNewPwd ? 'text' : 'password'" id="input" v-model="addValue.newPwd">
          <p class="text-md text-[#9CA3AF] mt-[5px]">Password must be longer than 6 characters</p>
          <svg-icon name="eye" class="svgEdit cursor-pointer s2ksvg s4ksvg absolute right-[1%] top-[42%] " width="12px" height="12px"
                    @click="showNewPwd = !showNewPwd"></svg-icon>
        </div>
        <div class="flex flex-col justify-start items-start mt-[16px] relative">
          <p class="text-sm text-[var(--theme-font-color)]">Retype new password</p>
          <input :type="showRetypePwd ? 'text' : 'password'" id="input" v-model="addValue.retypePwd" :style="{border: retypeError || retypeError2 ? 'solid #FF8A4C 1px': ''}">
          <svg-icon name="eye" class="svgEdit cursor-pointer s2ksvg s4ksvg absolute right-[1%] top-[57%]" width="12px" height="12px"
                    @click="showRetypePwd = !showRetypePwd"></svg-icon>
          <p v-show="retypeError" class="text-sm text-[#FF8A4C] mt-[3px] absolute bottom-[-20px] left-0 ">Please Enter the new password again</p>
          <p v-show="retypeError2" class="text-sm text-[#FF8A4C] mt-[3px] absolute bottom-[-20px] left-0 ">Passwords do not match</p>
        </div>
      </div>
    </template>
    <template #footer>
      <div class="absolute bottom-0 left-0 w-full h-[81px] border-t border-solid border-[var(--grid)] z-[999] flex flex-row justify-start items-center">
        <div class="w-[160px] h-[41px] font-[500] text-white font-Medium text-md bg-[#1C64F2] rounded-lg flex ml-[1rem] cursor-pointer s4k:rounded-[8px]" @click="createAccount">
          <span class="m-auto">Apply Changes</span></div>
        <div class="w-[88px] h-[41px] font-[500] text-white font-Medium text-md bg-[var(--grid)] rounded-lg flex ml-[1rem] cursor-pointer s4k:rounded-[8px]" @click="closeModal">
          <span class="m-auto">Cancel</span></div>
      </div>
    </template>
  </fwb-modal>
</template>

<style scoped lang="scss">
#dropdown{
  :deep(button){
    background: var(--theme);
    border: solid var(--grid) 1px;
    box-shadow: none;
    color: var(--theme-font-color);
    background-color: var(--theme) !important;
    box-sizing: border-box;
    cursor: pointer;
    width: 416px;
    height: 40px;
    border-radius: 8px;
    font-size: 14px;
    padding: 0 0 0 15px;
    margin-top: 3px;
    position: relative;
    svg{
      position: absolute;
      right: 3%;
      top: 50%;
      transform: translateY(-50%);
      width: 15px;
      height: 15px;
      color: var(--svg);
    }
  }
  #group{
    height: 98px;
    width: 414px;
    color: var(--theme-font-color);
    border-radius: 0px;
    background-color: var(--theme);
    border: solid var(--grid) 1px;
    li{
      height: 20px;
      padding-left: 15px;
      padding-right: 0;
      cursor: pointer;
      font-size: 14px;
      border-bottom: solid var(--grid) 1px;
      &:hover{
        color: var(--theme-font-color-hover);
        background-color: var(--grid);
      }
    }
  }
}
#CreateModal {
  :deep(.max-w-md) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    border-radius: 0;
    max-width: 440px;
    height: auto;

    button {
      cursor: pointer;

      &:hover {
        background: var(--theme);
      }

      svg {
        color: #6B7280;
      }
    }

    .bg-white {
      width: 100%;
      height: 100%;
      background-color: var(--theme);
    }
    .p-4 {
      padding-right: 0.4rem;
    }
    .p-6 {
      padding:  1rem;
      padding-top: 0;
      padding-right: 2rem;
    }
  }
}

#input {
  width: 100%;
  height: 37px;
  padding: 0;
  padding-left: 10px;
  font-size: 14px;
  color: #9CA3AF;
  background: var(--theme);
  border: solid 1px var(--grid);
  border-radius: 8px;
  margin-top: 6px;
  &:focus {
    outline: none;
    box-shadow: inset 0 0;
  }
}
@media screen and (min-width: 2560px) {
  .s2ksvg{
    transform: scale(1) !important;
  }
  #CreateModal {
    :deep(.max-w-md) {
      transform: scale(1.5);
      .p-4{
        padding: 0.8rem;
        padding-right: 0.4rem;
      }
      .p-6 {
        padding:  0.8rem;
        padding-right: 1.6rem;
        margin-top: -20px;
        margin-bottom: 20px;
      }
    }
  }
  #dropdown{
    position: relative;
    :deep(button){
      width: 412px;
    }
    #group{
      position: absolute;
      top: -25px;
      height: 110px;
      width: 410px;
    }
  }
}
@media screen and (min-width: 3840px) {
  .s4ksvg{
    transform: scale(1) !important;
  }
  #CreateModal {
    :deep(.max-w-md) {
      transform: scale(2);
      .p-4{
        padding: 0.6rem;
        padding-right: 0rem;
      }
      .p-6 {
        padding:  0.6rem;
        padding-right: 1rem;
      }
    }
  }
  #dropdown{
    position: relative;
    :deep(button){
      width: 413px;
    }
    #group{
      position: absolute;
      top: -45px;
      height: 110px;
      width: 410px;
      li{
        height: 12px;
      }
    }
  }
}
</style>
